<style lang="scss" scoped>
	.confirm { height:100%; background:#f1f1f1; padding:20rpx;
	  .dl{ background:#fff; display:flex; padding:20rpx; align-items:center; border-bottom:1px solid #eee;
			  image{ width:200rpx; display:block; height:150rpx;}
					.t{width:170rpx; text-align:right;}
					.fr{ flex:1; margin-left:20rpx;}
					.red{color:red;}
					&.p{ align-items:flex-start;}
					.b{ font-weight:bold;}
					&.mg{margin-top:20rpx;}
					.intxt{ width:100%;}
			}
			.btn{margin-top:30rpx;}
	}
</style>
<template>
	 <view class="confirm">
			 <view class="dl">
					 <view class="b">产品信息</view>
				</view>
			 <view class="dl p">
					 <view><image :src="goods.imgurl"></image></view>
						<view class="fr">
						  <view>{{goods.title}}</view>
								<view style="margin-top:10rpx;">订单价格：<text class="red" v-if="goods.price==null">0.00</text><text v-else class="red">{{goods.price}}</text></view>
						</view>
				</view>	
				<view class="dl mg">
					 <view class="b">收货人信息</view>
				</view>
				<view class="dl">
					 <view class="t">选择省市区：</view>
					 <view class="fr">
							 <picker mode="region" @change="selectarea">
							 	<view v-if="pca==''">请选择省市区</view>
									<view>{{pca}}</view>
							 </picker>							
						</view>
				</view>			
				<view class="dl">
					 <view class="t">详细地址：</view>
						<view class="fr"><input type="text" maxlength="100" v-model="form.address" class="intxt" placeholder="请输入详细地址"></view>
				</view>
				<view class="dl">
					 <view class="t">收货人：</view>
						<view class="fr"><input type="text" maxlength="10" v-model="form.name" class="intxt" placeholder="请输入收货人姓名"></view>
				</view>
				<view class="dl">
					 <view class="t">手机号码：</view>
						<view class="fr"><input type="number" maxlength="11" v-model="form.mobile" class="intxt" placeholder="请输入手机号"></view>
				</view>
				<view>
				<button class="btn" @tap="subOrder" :disabled="submit">{{submit?'提交中':'提交订单'}}</button>
				</view>
		</view>
</template>

<script>
	 export default{
			  data(){
						 return{
								  id:'',
								  submit:false,
										goods:{},
										pca:'',
										form:{
												price:'', //价格
												title: '', //标题
												productimg:'', //产品图片
												pid: '', //产品ID
												province: '', //省份
												city: '', //城市
												area: '', //区域
												address: '', //地址										
												kdtype:1,
												name:'', //会员姓名
												mobile:'', //会员手机号				
												shaddress:'', //收货地址					
										}
							}
					},
					
					onLoad(e){
						  this.id = e.id;
								this.getOne();
					},
					
					methods:{
						
						  async getOne(){
						  	  const json = await this.api.getOne({q:{id:this.id,field:'title,img,price'}})
						  			if(json.data.code==0){						  
						  					this.goods = json.data.data;
													this.form.pid = this.goods.id;
													this.form.price = this.goods.price==null?0:this.goods.price;
													this.form.title = this.goods.title;
													this.form.productimg = this.goods.img;
													this.form.mobile = this.app.globalData.userInfo.mobile;
						  			}
						  },	
													
								//选择省市区
								selectarea(e){
									  this.form.province = e.detail.value[0];
											this.form.city = e.detail.value[1];
											this.form.area = e.detail.value[2];
											this.pca = this.form.province+this.form.city+this.form.area;
								},
													
						  //提交订单
						  async subOrder(){	
									 let that = this;
									 if(this.pca==""){ this.api.toast("请选择省市区"); return; }
									 if(this.form.address==""){ this.api.toast("请输入详细地址"); return; }
										this.form.shaddress = this.pca + this.address;
										if(this.form.name==""){ this.api.toast("请输入收货人姓名"); return; }
										if(this.form.mobile==""){ this.api.toast("请输入手机号"); return; }
									 if(this.form.mobile.length!=11){ this.api.toast("请输入正确的手机号"); return; }
						  		this.submit = true;
						  		let timer = setTimeout(res=>{	that.submit = false;	clearTimeout(timer);},1500)
						  		const json = await this.api.submitOrder({q:this.form});
						  		if(json.data.code==0){
						  				uni.showToast({title:"订单提交成功"})
						  				setTimeout(res=>{							 
						  						uni.redirectTo({url:'/pages/pay/index?orderno='+json.data.data+'&title='+that.form.title});					 
						  				},1200)
						  		}
						  }
					}
						
		}
</script>
